<template >
<view>
  
<view class="animation-element-wrapper" :animation="animation"  @click="hiddenFloatView" >



<view class="animation-element" catchtap="nono">
    <text class="left-bt"  @click="hiddenFloatView(1)"  >取消</text>
        <text class="right-bt"  @click="hiddenFloatView(2)"  >确定</text>
          <view class="line"></view> 
<picker-view indicator-style = "height: 50rpx;" :value="value"  @change="bindChange" catchtap="nono" >
<picker-view-column>

           <view   v-for="(item,index) in provinces"    :key="index">

             {{item.name}}
          </view>
  </picker-view-column>
  
 <picker-view-column>
          <view   v-for="(item,index) in citys"    :key="index">
            {{item.name}}
          </view>
        </picker-view-column>
  <picker-view-column>
          <view  v-for="(item,index) in countys"    :key="index"   >
            {{item.name}}
          </view>
        </picker-view-column>

</picker-view>
</view>
</view>
 


  <view class="add-address">
      <view class="add-form">
          <view class="form-item">
            <!-- auto-focus 弹出input-->
              <input class="input"  placeholder="姓名" :value="addressData.name" v-model="addressData.name" />
          </view>
          <view class="form-item">
              <input class="input"   :value="addressData.mobile" v-model="addressData.mobile" type="number" maxlength="11" placeholder="手机号码"/>
          </view>
          <view @click="translate" class="form-item">
              <input class="input" :value="addressData.full_region" v-model="addressData.full_region"  disabled="true"  placeholder="省份、城市、区县"/>
          </view>
          <view class="form-item">
              <input class="input"  :value="addressData.address" v-model="addressData.address" placeholder="详细地址, 如街道、楼盘号等"/>
          </view>
          <view class="form-default">
      
              <text @click="bindIsDefault" :class="addressData.is_default ? 'selected default-input' : 'default-input'">设为默认地址</text>
          </view>
      </view>
      <view :style="{height:iphoneXb2}" class="btns">
          <button class="cannel" @click="cancelAddress">取消</button>
          <button class="save" @click="saveAddress">保存</button>
      </view>
    
  </view>
  <view class="bg-mask" @click="cancelSelectRegion" v-if="openSelectRegion"></view>
</view>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'
import util from '@/utils/util'
import area from '@/mpvue-picker/area.js';
var app = getApp();
var areaInfo = [];//所有省市区县数据

var provinces = [];//省

var citys = [];//城市

var countys = [];//区县

var index = [0, 0, 0];

var cellId;

var t = 0;

var moveY = 100;
export default {
  data () {
    return {
       iphoneXb2:'50px',
      animation:'',
      cityall:'',
      show: false,
      provinces: '',
     
      citys: '',
      countys: '',
      value: [0, 0, 0],
      valueAdd:[0,0,0],
      provinces:[1,2,3,45],
      date:'',
      addressData: {
        id: 0,
        province_id: 0,
        city_id: 0,
        district_id: 0,
        address: '',
        full_region: '',
        name: '',
        mobile: '',
        is_default: false,
        provinceName:'',
        cityName:'',
        districtName:''
      },
      addressId: '',
      openSelectRegion: false,
      selectRegionList: [
        { id: 0, name: '省份', parent_id: 1, type: 1 },
        { id: 0, name: '城市', parent_id: 1, type: 2 },
        { id: 0, name: '区县', parent_id: 1, type: 3 }
      ],
      regionType: 1,
      regionList: [],
      selectRegionDone: false
    }
  },
 
  async mounted () {
    if (this.$route.query.id) {
      this.addressId = this.$route.query.id;
    }
    this.iphoneXb2=app.globalData.iphoneH;
      if(this.$route.query.id){
 
        let storeData=this.$store.state.editAddress
        console.log(storeData)
        this.addressData.name=storeData.consignee
        this.addressData.address=storeData.address
        this.addressData.mobile=storeData.mobile
        storeData.isDefault==0?this.addressData.is_default=false:this.addressData.is_default=true;
        
          
          
      //  is_default
    }
    
  },
  onShow: function () {
  
    this.animation = wx.createAnimation({
      transformOrigin: "50% 50%",
      duration: 0,
      timingFunction: "ease",
      delay: 0
    }
    )
    this.animation.translateY('100vh').step();
    
      this.animation=this.animation.export()
      this.show=false
 
 
    var that = this;
   

    //获取省市区县数据
 
      
      //获取省份数据
 
      this.getProvinceData(area,that);
    

  },
  onUnload(){  // 退出销毁
     this.value=[0,0,0];
     this.addressData.full_region='省份、城市、区县';
     this.addressId='';
     this.addressData={
        id: 0,
        province_id: 0,
        city_id: 0,
        district_id: 0,
        address: '',
        full_region: '',
        name: '',
        mobile: '',
        is_default: false,
        provinceName:'',
        cityName:'',
        districtName:''
      }
  },
  
  // ------------------- 地址选择分割线 --------------------
 
  //移动按钮点击事件
  
  
  methods: {
    translate (e) {
          let show
        if (t == 0) {
          moveY = 0;
          show = false;
          t = 1;
      } else {
          moveY = 100;
          show = true;
          t = 0;
        }
        // this.animation.translate(arr[0], arr[1]).step();
        this.animationEvents(this,moveY, show); 
      },
    bindIsDefault () {
      // console.log('点击，设置默认地址', this.address);
      let address = this.addressData;
      address.is_default = !address.is_default;
      this.address = address;
    
    },
  //隐藏弹窗浮层
  hiddenFloatView(e){
    console.log(e);
    moveY = 100;
    this.show = true;
    t = 0;
    this.animationEvents(this,moveY,false);
    if(e==2){
       this.addressData.full_region= this.cityall; // 赋值地址
     
    }
    if(this.value[0]==0&&this.value[1]==0&&this.value[2]==0){
      this.addressData.full_region='北京市市辖区东城区'
    }
    console.log(this.value)
  },
       bindChange: function (e) {
            var val = e.target.value
          //判断滑动的是第几个column
          //若省份column做了滑动则定位到地级市和区县第一位
          if (this.value[0] != val[0]) {
            console.log(448)
            val[1] = 0;
            val[2] = 0;
            this.getCityArr(val[0], this);//获取地级市数据
            this.getCountyInfo(val[0], val[1], this);//获取区县数据
          } else {    //若省份column未做滑动，地级市做了滑动则定位区县第一位
          console.log('xx')
            if (this.value[1] != val[1]) {
              val[2] = 0;
              this.getCountyInfo(val[0], val[1], this);//获取区县数据
            }
          }
          this.value = val;

          console.log(this.value + " => " + val);

          //更新数据
          
          //   value: [val[0], val[1], val[2]],
          //   province: provinces[val[0]].name,
          //   city: citys[val[1]].name,
          //   county: countys[val[2]].name
        this.cityall=provinces[val[0]].name+citys[val[1]].name+countys[val[2]].name;
        this.provinceName=provinces[val[0]].name;
        this.cityName=citys[val[1]].name;
        this.districtName=countys[val[2]].name;
         
  },
 
      //滑动事件
    animationEvents(that,moveY,show){
      console.log("moveY:" + moveY + "\nshow:" + show);
      this.animation = wx.createAnimation({
        transformOrigin: "50% 50%",
        duration: 400,
        timingFunction: "ease",
        delay: 0
      }
      )
      this.animation.translateY(moveY + 'vh').step()
    },

// ---------------- 分割线 ---------------- 

//获取省份数据
 getProvinceData(data,that) {
  var s;
  provinces = [];
  var num = 0;
  for (var i = 0; i < data.length; i++) {
    s = data[i];
    if (s.di == "00" && s.xian == "00") {
      provinces[num] = s;
      num++;
    }
  }

  this.provinces=provinces
//   that.setData({
//     provinces: provinces
//   })
 
  //初始化调一次
  this.getCityArr(0, that);
  this.getCountyInfo(0, 0, that);
  // that.setData({
  //   province: "北京市",
  //   city: "市辖区",
  //   county: "东城区",
  // })

},

// 获取地级市数据
 getCityArr(count, that) {
   console.log(count)
  var c;
  citys = [];
  var num = 0;
  for (var i = 0; i < area.length; i++) {
    c = area[i];
    if (c.xian == "00" && c.sheng == this.provinces[count].sheng && c.di != "00") {
      citys[num] = c;
      num++;
    }
  }
  if (citys.length == 0) {
    citys[0] = { name: '' };
  }
  console.log(citys)
  this.citys=citys;
  // that.setData({
  //   city: "",
  //   citys: citys,
  //   value: [count, 0, 0]
  // })
},

// 获取区县数据
 getCountyInfo(column0, column1, that) {
  var c;
  countys = [];
  var num = 0;
  for (var i = 0; i < area.length; i++) {
    c = area[i];
    if (c.xian != "00" && c.sheng == provinces[column0].sheng && c.di == citys[column1].di) {
      countys[num] = c;
      num++;
    }
  }
  if(countys.length == 0){
    countys[0] = {name:''};
  }
   this.countys=countys;
  // that.setData({
  //   county: "",
  //   countys: countys,
  //   value: [column0, column1, 0]
  // })
},

//以上地址选择
   
 
    // 点击浮窗的背景遮罩，取消地市选择
    cancelSelectRegion () {
       console.log(12121)
    },
    // 点击底部“取消按钮”退出本页面
    cancelAddress () {
      // wx.navigateTo({
      //   url: '../ucenter/address'
      // })
      console.log(33333)
    },
    // 点击底部“保存按钮”保存地址
    async saveAddress () {
      // console.log(this.address)
      let address = this.addressData;
      if (address.name === '') {
        util.showErrorToast('请输入姓名');
        return false;
      }
      if (address.mobile.length<11) {
        util.showErrorToast('请输入正确的手机号码');
        return false;
      }
      if (address.full_region === '') {
        util.showErrorToast('请输入省市区');
        return false;
      }
      if (address.address === '') {
        util.showErrorToast('请输入详细地址');
        return false;
      }
       wx.showLoading({
         title: '加载中' // 数据请求前loading
      })
      let is_default
     address.is_default==true?is_default=1:is_default=0;
      
        let data=  JSON.stringify({
          "consignee":address.name,
          "country":"中国",
          "provinceName":this.provinceName,
          "cityName":this.cityName,
          "districtName":this.districtName,
          "postalCode":"",
          "address":address.full_region+address.address,
          "phone":address.mobile,
          "mobile":address.mobile,
          "bestTime":"",
          "signBuilding":"",
          "isDefault":is_default,
          'addressId':this.addressId
        })

        if(this.addressId){
          //编辑 
          const res= await api.AddressMod({'data':data});
           if (res.status === 0) {
                  wx.hideLoading() //结束加载
                    wx.showToast({
                    title: '编辑成功'
                  });
                wx.navigateBack({ changed: true })
              }else{
                util.showErrorToast(res.msg);
              }
        }else{
            const res= await api.AddressAdd({'data':data});
             if (res.status === 0) {
                    wx.hideLoading() //结束加载
                      wx.showToast({
                      title: '添加成功'
                    });
                  wx.navigateBack({ changed: true })
                }else{
                  util.showErrorToast(res.msg);
                }
        }
        
    
     
    }
  },
  // 原生的分享功能
  onShareAppMessage: function () {
    return {
      title: 'dfcShop',
      desc: '大风车商场',
      path: '/pages/ucenter/addressAdd'
    }
  }
}
</script>

<style scoped>
page{
    height: 100%;
    background: #f4f4f4;
}
.add-address .add-form{
    background: #fff;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.add-address .form-item{
    height: 116rpx;
    padding-left: 31.25rpx;
    border-bottom: 1px solid #d9d9d9;
    display: flex;
    align-items: center;
    padding-right: 31.25rpx;
}

.add-address .input{
    flex: 1;
    height: 44rpx;
    line-height: 44rpx;
    overflow: hidden;
}

.add-address .form-default{
    border-bottom: 1px solid #d9d9d9;
    height: 75rpx;
    background: #fafafa;
    padding-top: 28rpx;
    font-size: 28rpx;
}

.default-input{
    margin: 0 auto;
    display: block;
    width: 240rpx;
    height: 40rpx;
    padding-left: 50rpx;
    line-height: 40rpx;
    background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/checkbox-sed825af9d3-a6b8540d42.png) 1rpx -448rpx no-repeat;
    background-size: 38rpx 486rpx;
    font-size: 28rpx;
    margin-left: 5vw;
}

.default-input.selected{
    background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/checkbox-sed825af9d3-a6b8540d42.png) 0 -192rpx no-repeat;
    background-size: 38rpx 486rpx;
}

.add-address .btns{
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: hidden;
    display: flex;
    height: 100rpx;
    width: 100%;
}

.add-address .cannel,.add-address .save{
    flex: 1;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    font-size: 28rpx;
    color: #fff;
    border:none;
    border-radius: 0;
}

.add-address .cannel{
    background: #333;
}

.add-address .save{
    background: #b4282d;
}


.region-select{
  width: 100%;
  height: 600rpx;
  background: #fff;
  position: fixed;
  z-index: 10;
  left:0;
  bottom: 0;
}

.region-select .hd{
  height: 108rpx;
  width: 92%;
  border-bottom: 1px solid #f4f4f4;
  padding: 46rpx 30rpx 0 30rpx;
}

.region-select .region-selected{
  float: left;
  height: 60rpx;
  display: flex;
}

.region-select .region-selected .item{
  max-width: 140rpx;
  margin-right: 30rpx;
  text-align: left;
  line-height: 60rpx;
  height: 100%;
  color: #333;
  font-size: 28rpx;
  overflow: hidden;
      text-overflow: ellipsis;
    white-space: nowrap;
}

.region-select .region-selected .item.disabled{
  color: #999;
}

.region-select .region-selected .item.selected{
  color: #b4282d;
}

.region-select .done{
  float: right;
  height: 60rpx;
  width: 60rpx;
  border: none;
  background: #fff;
  line-height: 60rpx;
  text-align: center;
  color: #333;
  font-size: 28rpx;
}

.region-select .done.disabled{
  color: #999;
}



.region-select .bd{
  height: 492rpx;
  width: 100%;
  padding: 0 30rpx;
  overflow-y: auto;
}

.region-select .region-list{
  height: auto;
  overflow: scroll;

}

.region-select .region-list .item{
  width: 100%;
  height: 104rpx;
  line-height: 104rpx;
  text-align: left;
  color: #333;
  font-size: 28rpx;
}

.region-select .region-list .item.selected{
  color: #b4282d;
}


.bg-mask{
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top:0;
  left:0;
  z-index: 8;
}
.infoText{
    margin-top: 20rpx;
    text-align: center;
    width: 100%;
    justify-content: center; 
}

picker-view{
  background-color: white;
  padding: 0;
  width: 100%; 
  height: 380rpx;
  bottom: 0;
  position: fixed;
}

picker-view-column view{
  vertical-align:middle; 
  font-size: 28rpx;
  line-height: 28rpx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ----------------------------------------- */

.animation-element-wrapper {
  display: flex;  
  position: fixed;
  left: 0;
  top:0;
  z-index: 999;;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}
.animation-element {
  display: flex;
  position: fixed;
  width: 100%;
  height: 470rpx;
  bottom: 0;
  background-color: rgba(255, 255, 255, 1);
}

.animation-button {
  margin-top: 20rpx;
  top:20rpx;
  width: 400rpx;
  height: 100rpx; 
  line-height: 100rpx; 
  align-items:center;
}


text{
  color: #999999;
  display: inline-flex;  
  position: fixed;
  height: 50px;
  line-height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 34rpx;
  font-family: Arial, Helvetica, sans-serif;
}

.left-bt{
  left: 30rpx;
}
.right-bt {
  right: 30rpx;
  color: #b4282d;
}

.line{
  display: block;
  position: fixed;
  height: 1rpx;
  width: 100%;
  margin-top: 89rpx; 
  background-color: #eeeeee;
}

</style>
